<template>
  <view class="icon-container">
    <navbar title="图标大全"></navbar>
    <view class="bg"></view>
    <view class="list-container">
      <TiyanDialog :bottom="true"></TiyanDialog>
      <view class="item" v-for="(item, i) in list" :key="item.id" @click="toDetail(item)">
        <view class="flex">
          <view class="label">{{ item.title }}</view>
          <view class="num">{{ item.signIcons.length }}张</view>
        </view>
        <view class="body">
          <view v-for="(icon, j) in item.signIcons" :key="j" v-if="j<5" class="icon">
            <image :src="icon.img" mode="aspectFit"></image>
          </view>
          <view class="icon arrow">
            <image src="@/static/icon/right_jiantou.png" style="width: 32rpx;height: 32rpx" mode="aspectFit"></image>
          </view>
        </view>
      </view>
    </view>
    <ADIntercept ref="ADIntercept"></ADIntercept>
  </view>
</template>

<script>
import navbar from '@/components/navbar'
import {mapActions} from 'vuex'
import ADIntercept from "@/components/ADIntercept.vue";
import TiyanDialog from "@/components/TiyanDialog.vue";

export default {
  components: {
    TiyanDialog,
    ADIntercept,
    navbar
  },
  data() {
    return {
      kemu: null,
      list: []
    }
  },
  async onLoad({kemu}) {
    this.kemu = kemu
    this.list = await this.signCategoryList()
  },
  methods: {
    ...mapActions('question', ['signCategoryList']),
    toBack() {
      uni.navigateBack()
    },
    async toDetail(cate) {
      try {
        await this.$refs.ADIntercept.tryOpen()
        uni.navigateTo({
          url: '/pages/icon/icon?id=' + cate.id + '&kemu=' + this.kemu
        });
      } catch (e) {
        console.log(e)
      }
    }
  }
}
</script>

<style lang="scss">
page {
  background-color: #f4f3fb;
}
::v-deep .top-bar.white {
  background-color: transparent;
}
.bg {
  width: 750rpx;
  height: 762rpx;
  background-image: url("@/static/icon/chelun_bg.png");
  position: fixed;
  left: 0;
  top: 0;
  background-size: cover;
}
.icon-container {
  display: flex;
  flex-direction: column;
  position: relative;

  .list-container {
    padding: 0 32upx;
    z-index: 1;
    margin-top: 130rpx;

    .item {
      background-color: #fff;
      margin-bottom: 24rpx;
      border-radius: 24rpx;
      padding-top: 32rpx;
      padding-left: 24rpx;
      padding-bottom: 32rpx;

      .label {
        font-size: 30upx;
        font-weight: bold;
        color: rgba(52, 60, 90, 1);
        margin-bottom: 30upx;
        flex: 1;
      }

      .num {
        color: rgba(151, 156, 173, 1);
        font-size: 24rpx;
        margin-right: 24rpx;
      }

      .body {
        display: flex;
        font-size: 28upx;
        color: #585858;
        align-items: center;

        .icon {
          margin-right: 32rpx;
          &:last-child {
            margin-right: 0;
          }

          &.arrow {
            background-color: rgba(236, 240, 255, 1);
            width: 80upx;
            height: 80upx;
            border-radius: 100rpx;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          image {
            width: 80upx;
            height: 80upx;
          }
        }
      }
    }
  }
}
</style>
